<template>
  <div class="home">
    <PageHeader></PageHeader>
    <div class="news page-auto">
      <div class="news-left">
        <div class="list current">工会活动</div>
        <div class="list">工资杯</div>
        <div class="list">户外活动</div>
        <div class="list">呆猪新闻</div>
      </div>
      <div class="news-right">
        <div class="list">
          <div class="desc">黑暗纪元：勇者崛起与恶魔的决战，与恶魔展开一场史诗般的决战</div>
          <img class="pic" src="@/assets/images/pic/logo.png" alt="">
        </div>
        <div class="list">
          <div class="desc">黑暗纪元：勇者崛起与恶魔的决战，与恶魔展开一场史诗般的决战</div>
          <img class="pic" src="@/assets/images/pic/logo.png" alt="">
        </div>
      </div>
    </div>
    <PageBottom></PageBottom>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import PageHeader from '@/components/page-header/index.vue'
import PageBottom from '@/components/page-bottom/index.vue'
import { createChat } from '@/api/simulator'
const router = useRouter()
const route = useRoute()


</script>

<style lang="scss">


.page-auto {
  width: 1000px;
  margin: 0 auto;
}
.home {

  .news {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 50px;
    .news-left {
      width: 200px;
      height: 264px;
      background: linear-gradient( 180deg, #FFDCDD 0%, #FFEEEF 100%);
      border-radius: 20px 20px 20px 20px;
      display: flex;
      align-items: center;
      flex-direction: column;
      padding-top: 30px;
      .list {
        width: 141px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 0 10px 0;
      }
      .current {
        background: #FFADA9;
        border-radius: 100px 100px 100px 100px;
        border: 2px solid #000000;
      }
    }
    .news-right {
      width: 710px;
      min-height: 572px;
      padding: 18px 30px;
      background: #FFFAFA;
      border-radius: 20px 20px 20px 20px;
      border: 1px solid #FFDCDC;
      .list {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #EEEEEE;
        padding: 12px 0;
        .desc {
          font-size: 18px;
          color: #212121;
          width: 474px;
        }
        .pic {
          width: 206px;
          height: 150px;
          border-radius: 20px;
          border: 3px solid #000000;
        }
      }
    }
    img {
      width: 228px;
      height: 164px;
      border-radius: 6px;
      border: 2px solid #000;
    }
  }
}
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}



</style>
